<template>
	<view class="addressList">
		<view class="addressList-title">选择地址</view>
		<u-radio-group v-model="isCheckAddress" size="40rpx" width="100%">
			<u-radio 
				@change="adressChange"
				active-color="#0C34BA"
				v-for="(item,index) in list" :key="index"
				class="addressList-item"
				:name="item.aid"
			>
				<Address :address="item"></Address>
			</u-radio>
		</u-radio-group>
		<!-- <view v-for="(item,index) in list" :key="index" class="addressList-item">
			<Address :address="item"></Address>
		</view> -->
		<u-button hover-class="none" shape="circle" :custom-style="commitMall" @click="addAddress">新增地址</u-button>
	</view>
</template>

<script>
	import Address from "components/content/Address.vue"
	
	export default{
		mounted() {
			let isDefault 
			this.list = this.addressList
			this.list.forEach((e,index)=>{
				if(e.isDefault == 1){
					isDefault = e
					this.list.splice(index,1)
					return
				}
			})
			this.list.unshift(isDefault)
		},
		data() {
			return {
				commitMall:{
					color: "#FFFFFF",
					width:"85%",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA",
					margin: "0rpx 40rpx",
					position: "fixed",
					bottom: "20rpx"
				},
				list:[],
				isCheckAddress:this.defaultAddress.aid
			}
		},
		components:{
			Address
		},
		props:{
			addressList:{
				type:Array
			},
			defaultAddress:Object
		},
		methods:{
			addAddress(){
				uni.navigateTo({
					url:"../../../../pages/mine/childMine/myAddress/NewAddress"
				})
			},
			adressChange(aid){
				this.list.forEach(e=>{
					if(e.aid == aid){
						this.$emit("isAddressChange",e)
						return
					}
				})
			}
		}
	}
</script>

<style scoped>
	.addressList{
		margin: 30rpx 30rpx;
		position: relative;
	}
	.addressList-item{
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #C8C9CC;
	}
</style>
